<template>
<div class="custom-tree-container">
  <div class="block">
       <el-input v-model="value" placeholder="请输入ID查询" style="width:200px"></el-input>
       <el-button type="primary" icon="el-icon-search" @click="sear">搜索</el-button>
    <el-tree
      :data="list"
      :props="props"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"> 
      <span class="custom-tree-node" slot-scope="{ node}">
        <span>{{ node.data.name }}</span>
        <span class="btn">
            <el-link type="success" @click="add()">添加信息</el-link>
            <el-link type="primary" @click="add(false,node.data.id)">修改信息</el-link>
             <el-link type="danger" @click="del(node.data.id)">删除信息</el-link>
        </span>
      </span>
    </el-tree>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="添加节点" label-width="110px" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="选择部门" label-width="110px" prop="parent_id">
                <el-cascader
                  :options="list"
                  :props="props"
                  clearable v-model="form.parent_id"></el-cascader>
            </el-form-item>
            
            <el-form-item label="添加人姓名" label-width="110px" prop="user">
                <el-input v-model="form.user" autocomplete="off"></el-input>
            </el-form-item>
                <el-form-item label="添加人手机号" label-width="110px" prop="user_mobile">
            <el-input v-model="form.user_mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">{{tit}}</el-button>
                <el-button @click="resetForm('form')">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</div>
</template>



<script>
import {post,get} from '../uilt/http.js'
import {department,del,add,emit1,show} from '../uilt/app.js'
  export default {
    data() {
      return {
        vall:'',
        list:[],
        tit:'添加',
        props:{
            label:'name',
            children:'son',
            checkStrictly: true,
            value:'id',
            emitPath:false
        },
        value:'',
        val:'',
        id:'',
        upda:{},
        title:'添加信息',
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          parent_id: '',
          user: '',
          user_mobile: '',
          openid:1
        },
        formLabelWidth: '120px',
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          
          user: [
           { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          user_mobile: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 11, max: 11, message: '必须11位手机号', trigger: 'blur' }
          ],
        }
      }
    },
    mounted() {
        this.departlist()
    },
    methods: {
      //修改
      async add(val,id){
          this.val = val
          this.id = id
          this.dialogFormVisible=true
          if(this.val==false){
              this.title = '信息修改'
                this.tit = '确定'
              let res = await get(show,{id:id})
            if(res.code=='00000'){
                this.form.name = res.data.name
                this.form.parent_id = res.data.parent_id
                this.form.user = res.data.user
                this.form.user_mobile = res.data.user_mobile
            }
            console.log(this.upda)
          }else{
              this.title = '添加信息'
              this.tit = '添加'
              this.form = {}
          }
      },
      //查询
      async sear(){
          let res = await get(show,{id:this.value})
        if(res.code=='00000'){
            this.list = []
            this.list.push(res.data)
        }
        console.log(this.list)
      },
      //添加和修改的确定按钮
    submitForm(formName) {
        if(this.val==false){
            this.$refs[formName].validate(async (valid) => {
            if (valid) {
                let res = await post(emit1,{id:this.id,formdata:this.form})
                console.log(res)
                if(res.code=='00000'){
                  location.reload()
                    this.dialogFormVisible = false
                    this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                }
            } else {
            console.log('error submit!!');
            return false;
          }
        });
        }else{
            this.$refs[formName].validate(async (valid) => {
            if (valid) {
              if(this.form.parent_id==null){
                this.form.parent_id = 0
              }
            let res= await post(add,{name:this.form.name,parent_id:this.form.parent_id,user:this.form.user,user_mobile:this.form.user_mobile,openid:this.form.openid})
            // console.log(res)
            if(res.code=='00000'){
               location.reload()
                this.dialogFormVisible = false
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }
      },
      resetForm(formName) {
         this.dialogFormVisible=false
      },
      //删除
      async del(id){
        let res = await get(del,{id:id})
        console.log(res)
        if(res.code=='00000'){
           this.departlist()
            this.$message({
                    message: '删除成功',
                    type: 'success'
                });
        }
      },
      async departlist(){
          let res = await get(department)
        if(res.code=='00000'){
            this.list = res.data
        }
      }
    }
  };
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
.el-dialog{
    width: 100%;
}

</style>